<!--
 * @Author: yanjikun
 * @Date: 2022-04-29 14:31:31
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-06-13 16:17:32
 * @Description: file content
-->
<template>
  <div class="bg-transparent flex flex-col">
    <div class="bg-white pt-8px">
      <BasicForm
        :config="searchMenuConfig"
        label-width="100px"
        :action-col-options="{ span: 7 }"
        @register="register"
        @submit="handleSearch"
      >
        <template #advanceBefore>
          <Button type="primary" @click="openMenuModal({})">新增</Button>
        </template>
      </BasicForm>
    </div>
    <div class="flex-1 mt-8px bg-white">
      <DynamicTable
        :columns="columns"
        :data-request="menuTableRequest"
        :pagination="false"
      ></DynamicTable>
    </div>
  </div>
</template>

<script setup lang="ts">
  import BasicForm from '@/components/Form/src/BasicForm.vue'
  import { useForm } from '@/components/Form/src/hooks/useForm'
  import { useTable } from '@/components/Table/src/hooks/useTable'
  import { TableColumn } from '@/components/Table/src/types/column'
  import { useFormModal } from '@/hooks/useModal/useFormModal'
  import { listToTree } from '@/utils/helper/treeHelper'
  import { menuFormConfig, menuTableColumn, searchMenuConfig } from './menu.data'
  import { Button } from 'ant-design-vue'
  import { menuCreate, menuDelete, menuList, menuUpdate } from '@/api/system/menu'
  defineOptions({
    name: 'Menu',
  })
  const [register] = useForm()
  const [DynamicTable, dynamicTableInstance] = useTable()
  const [showModal] = useFormModal()
  const handleSearch = (data: any) => {
    console.log(data)
    dynamicTableInstance.reload()
  }
  const menuTableRequest = async (params) => {
    const data = await menuList(params)
    return listToTree(data as API.MenuResult)
  }
  const openMenuModal = async (record: Partial<API.IMenuItem>) => {
    await showModal({
      modalProps: {
        title: `${record.id ? '编辑' : '新增'}菜单`,
        width: 1000,
        onFinish: async (values) => {
          record.id && (values.id = record.id)
          const params = {
            ...values,
          }
          await (record.id ? menuUpdate : menuCreate)(params)
          dynamicTableInstance.reload()
        },
      },
      formProps: {
        config: menuFormConfig,
        initialValues: record,
      },
    })
  }
  const handleDeleteConfirm = async ({ id }: API.IMenuItem) => {
    await menuDelete({ id: id })
    dynamicTableInstance.reload()
  }
  const columns: TableColumn<API.IMenuItem>[] = [
    ...menuTableColumn,
    {
      title: '操作',
      dataIndex: '$action',
      width: 150,
      actions: ({ record }) => {
        return [
          {
            label: '编辑',
            onClick: () => openMenuModal(record),
          },
          {
            label: '删除',
            modalConfirm: {
              title: '确定删除该条数据吗?',
              onOk: () => handleDeleteConfirm(record),
            },
          },
        ]
      },
    },
  ]
</script>

<style lang="less" scoped></style>
